Creating a Drop Cap Effect with CSS
A drop cap is a large initial letter at the beginning of a paragraph that spans multiple lines, commonly used in print and digital typography to draw attention to the opening text.
Use the
::first-letterpseudo-element to target the first character of the paragraph.Increase the
font-sizeto make the initial letter larger than the body text.Use
float: left;to allow the text to wrap around the drop cap.Add
line-heightandmarginadjustments to align the drop cap with the surrounding text.
In this example, the first letter of the paragraph becomes a prominent drop cap. The text wraps naturally around it, creating a visually appealing typographic effect.
Ensure the drop cap size does not disrupt readability of the paragraph.
Use contrast and color to make the drop cap stand out without being distracting.
Test across different screen sizes to maintain proper alignment.
Combine with
line-heightandmarginfor smooth integration with surrounding text.Use semantic HTML for the paragraph; avoid extra markup for the drop cap to keep the code clean.